<template>
	<view class="">
		<u-form-item :label="item.label" borderBottom ref="formitem" :prop="item.value" 
		:required="item.required">
			<!-- <view  >{{ inputValue }}</view> -->
			<view @click="!disabled && (show = true)" style="flex: 1; padding: 0" ref="formitem">{{ inputValue }}</view>
			<!-- :class="[value ? 'uni-input-input' : 'select-wrap']" -->
		</u-form-item>

		<u-action-sheet v-if="multiple" ref="actionSheet" round="20" :title="`多选${item.label}`" :actions="list"
			:actives="selectValue" :show="show" :closeOnClickAction="false" cancelText="关闭" @select="select"
			@close="show = false"></u-action-sheet>
		<u-action-sheet v-else :actions="list" :show="show" cancelText="取消" @select="select"
			@close="show = false"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		mixins: [uni.$u.mpMixin, uni.$u.mixin],
		data() {
			return {
				selectValue: [],
				// inputValue: "",
				show: false,
			};
		},
		computed: {
			multiple() {
				return this.item?.props?.multiple || false
			},
			disabled() {
				this.getParentData("u-form")
				return this.parent.disabled;
			},
			list() {
				return this.item.options.map((e) => {
					return {
						...e,
						name: e.label,
					};
				});
			},
			inputValue() {
				if (this.multiple) {
					let str = this.value || [];
					let options = this.item.options || [];
					let dqOption = options.filter((e) => {
						return str.includes(e.value);
					});

					if (dqOption.length != 0) {
						return dqOption.map(e => e.label).join() || '123';
					} else {
						return "请选择"
					}
				}

				return (
					this.item.options.find((e) => e.value == this.value)?.label || this.value || "请选择"
				);
			},

		},
		props: {
			item: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			value: {
				typeof: [String, Number, Boolean, Array, Object],
				default: () => {
					return "";
				},
			},
		},
		watch: {
			value: {
				handler(newValue, oldValue) {
					if (this.multiple) {
						this.selectValue = this.value
						if (typeof newValue != 'object') {
							this.selectValue = []
						}
						console.log(typeof newValue, newValue, this.selectValue, "this.selectValue");
					}
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			blur() {
				this.$emit("input", this.inputValue);
				uni.$u.formValidate(this.$refs.formitem, "blur");
			},
			select(e) {
				if (this.multiple) {
					let i = this.selectValue.findIndex((item) => item == e.value);
					if (i != -1) {
						this.selectValue.splice(i, 1);
					} else {
						this.selectValue.push(e.value);
					}
					this.$emit("input", this.selectValue);
					return
				}
				this.$emit("input", String(e.value));
				uni.$u.formValidate(this.$refs.formitem, "blur");
				this.show = false;

			},
		},
	};
</script>

<style scoped lang="scss">
	.uni-input-input {
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
		padding-left: 10px;
	}

	.uni-forms-item__label {
		margin-left: 0;
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
	}
</style>